<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:tiles="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org" lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Z-SIGET</title>

		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="description" content="" />
		<meta name="author" content="" />

		<!-- basic styles -->

		<script src="../../static/jquery/jquery.min.js" th:src="@{/static/jquery/jquery-2.0.3.min.js}"></script>
		<link href="../../static/bootstrap/css/bootstrap.min.css" th:href="@{/static/bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
		<script src="../../static/bootstrap/js/bootstrap.min.js" th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script>
		<link href="../../static/font-awesome/css/font-awesome.min.css" th:href="@{/static/font-awesome/css/font-awesome.min.css}" rel="stylesheet" />		

		<link href="../../static/jquery/jquery-ui.css" th:href="@{/static/jquery/jquery-ui.css}" rel="stylesheet" />
		<script src="../../static/jquery/jquery-ui.js" th:src="@{/static/jquery/jquery-ui.js}"></script>
		<link href="../../static/custom/dataTables.bootstrap.css" th:href="@{/static/custom/dataTables.bootstrap.css}" rel="stylesheet" />
		<!-- fonts -->

		<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" th:href="@{'http://fonts.googleapis.com/css?family=Open+Sans:400,300'}" rel="stylesheet" />

		<!-- ace styles -->

		<link href="../../static/custom/ace.min.css" th:href="@{/static/custom/ace.min.css}" rel="stylesheet" />
		<link href="../../static/custom/ace-rtl.min.css" th:href="@{/static/custom/ace-rtl.min.css}" rel="stylesheet" />
		<link href="../../static/custom/ace-skins.min.css" th:href="@{/static/custom/ace-skins.min.css}" rel="stylesheet" />

		<!--[if lte IE 8]>
		  <link href="../../static/custom/ace.min.css" th:href="@{/static/custom/ace-ie.min.css}" rel="stylesheet" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->

		<script src="../../static/custom/ace-extra.min.js" th:src="@{/static/custom/ace-extra.min.js}"></script>

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

		<!--[if lt IE 9]>
		<script src="../../static/custom/html5shiv.js" th:src="@{/static/custom/html5shiv.js}"></script>
		<script src="../../static/custom/respond.min.js" th:src="@{/static/custom/respond.min.js}"></script>
		<![endif]-->
	</head>

	<body>
		<div class="navbar navbar-default" id="navbar">
			<script type="text/javascript">
				try{ace.settings.check('navbar' , 'fixed')}catch(e){}
			</script>

			<div class="navbar-container" id="navbar-container">
				<div class="navbar-header pull-left">
					<a href="#" class="navbar-brand">
						<small>
							<i class="fa fa-road"></i>
							Z SIGET > <span th:text="${empresa}"></span>
						</small>
					</a><!-- /.brand -->
				</div><!-- /.navbar-header -->

				<div class="navbar-header pull-right" role="navigation">
					<ul class="nav ace-nav">
						<li class="light-blue" th:if="${#authentication}">
							<a data-toggle="dropdown" href="#" class="dropdown-toggle">
								<img class="nav-user-photo" src="../../static/images/business_user.png" th:src="@{/resources/static/images/business_user.png}" alt="Foto" />
								<span class="user-info">
									<small>Bienvenido,</small>
									<span sec:authentication="name">Ruben</span>
								</span>

								<i class="fa fa-caret-down"></i>
							</a>

							<ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
								<li>
									<a href="#">
										<i class="fa fa-cog"></i>
										Opciones
									</a>
								</li>

								<li class="divider"></li>

								<li>
									<a href="#" th:href="@{/logout}">
										<i class="fa fa-power-off"></i>
										Cerrar Sesi&oacute;n
									</a>
								</li>
							</ul>
						</li>
					</ul><!-- /.ace-nav -->
				</div><!-- /.navbar-header -->
			</div><!-- /.container -->
		</div>

		<div class="main-container" id="main-container">
			<script type="text/javascript">
				try{ace.settings.check('main-container' , 'fixed')}catch(e){}
			</script>

			<div class="main-container-inner">
				<a class="menu-toggler" id="menu-toggler" href="#">
					<span class="menu-text"></span>
				</a>

				<div class="sidebar" id="sidebar">
					<script type="text/javascript">
						try{ace.settings.check('sidebar' , 'fixed')}catch(e){}
					</script>

					<input id="opcionMenu" type="hidden" th:value="${opcionMenu}"/>
					<ul class="nav nav-list">					
						
						<li id="MReservarServicio">
							<a href="serviciosRecientes" class="dropdown-toggle">
								<i class="fa fa-hand-o-up"></i>
								<span class="menu-text"> Reserva Servicios</span>
							</a>

						</li>
						<li class="disabled">
							<a href="#" title="Funcionalidad por implementar">
								<i class="fa fa-map-marker"></i>
								<span class="menu-text"> Opci&oacute;n 2 </span>

							</a>
						</li>
						<li class="disabled">
							<a href="#" title="Funcionalidad por implementar">
								<i class="fa fa-map-marker"></i>
								<span class="menu-text"> Opci&oacute;n 3  </span>

							</a>
						</li>
						<li class="disabled" title="Funcionalidad por implementar">
							<a href="#">
								<i class="fa fa-map-marker"></i>
								<span class="menu-text"> Opci&oacute;n 4  </span>

							</a>
						</li>
						<li class="disabled">
							<a href="#" class="dropdown-toggle" >
								<i class="fa fa-map-marker"></i>
								<span class="menu-text"> Opci&oacute;n 5  </span>

							</a>
						</li>
						<li class="disabled">
							<a href="#" class="dropdown-toggle" title="Funcionalidad por implementar">
								<i class="fa fa-map-marker"></i>
								<span class="menu-text"> Opci&oacute;n 6  </span>
							</a>
						</li>

						<li class="disabled">
							<a href="#" class="dropdown-toggle" title="Funcionalidad por implementar">
								<i class="fa fa-map-marker"></i>
								<span class="menu-text"> Opci&oacute;n ...  </span>
							</a>
						</li>

						<li  class="disabled">
							<a href="#" title="Funcionalidad por implementar">
								<i class="fa fa-map-marker"></i>
								<span class="menu-text"> Opci&oacute;n n  </span>
							</a>
						</li>
					</ul><!-- /.nav-list -->

					<div class="sidebar-collapse" id="sidebar-collapse">
						<i class="fa fa-angle-double-left" data-icon1="fa fa-angle-double-left" data-icon2="fa fa-angle-double-right"></i>
					</div>

					<script type="text/javascript">
						try{ace.settings.check('sidebar' , 'collapsed')}catch(e){}
					</script>
				</div>

				<div class="main-content" tiles:include="body">
					CUERPO DE LA PAGINA (Modo est&aacute;tico)
				</div><!-- /.main-content -->				
			</div><!-- /.main-container-inner -->

			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
				<i class="fa fa-angle-double-up fa fa-only bigger-110"></i>
			</a>
		</div><!-- /.main-container -->
		
		<script src="../../static/custom/typeahead-bs2.min.js" th:src="@{/static/custom/typeahead-bs2.min.js}"></script>

		<!-- page specific plugin scripts -->

		<!-- ace scripts -->

		<script src="../../static/custom/ace-elements.min.js" th:src="@{/static/custom/ace-elements.min.js}"></script>
		<script src="../../static/custom/ace.min.js" th:src="@{/static/custom/ace.min.js}"></script>

		<!-- inline scripts related to this page -->
		
		<script type="text/javascript">
		// <![CDATA[     
			jQuery(function($) {
				var opcion = $('#opcionMenu').val();
				if (opcion =="ReservarServicio")
				{
					$('#MReservarServicio').addClass('active');
				}
			})
			// ]]>
		</script>	
	</body>
</html>
